<template>
  <el-dialog
    v-dialogDrag
    title="编辑角色"
    :visible="isShowEditDialog"
    width="40%"
    @close="dialogClose"
    :close-on-click-modal="false"
  >
    <el-form :model="ruleForm" :rules="rules" ref="editForm" label-width="auto">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="角色描述" prop="description">
        <el-input type="textarea" :rows="3" v-model="ruleForm.description">
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm()"
          class="pull-right margin-l-25"
          >确定
        </el-button>
        <el-button @click="dialogClose" class="pull-right">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updateRole } from "@/api/systemManage/role";
export default {
  props: {
    isShowEditDialog: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },
  data() {
    return {
      textarea: "",
      ruleForm: {
        name: "",
        description: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入角色名称", trigger: "change,blur" },
        ],
        description: [
          {
            required: false,
            message: "请输入角色描述",
            trigger: "change,blur",
          },
        ],
      },
    };
  },

  methods: {
    // 关闭对话框
    dialogClose() {
      this.$emit("dialogClose");
    },
    // 确定按钮
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$delete(this.ruleForm, "createTime");
          if (this.ruleForm.status == true) {
            this.ruleForm.status = 0;
          } else {
            this.ruleForm.status = 1;
          }
          updateRole(this.ruleForm).then((res) => {
            this.$emit("close");
            this.$emit("dialogClose");
          });
        } else {
          return;
        }
      });
    },
  },
  mounted() {
    this.ruleForm = Object.assign({}, this.record);
  },
};
</script>

<style lang="less" scoped></style>
